<template>
    <section id="main-app">
      <section class="menu-wrapper">
        <main-menu :menus="menus" />
      </section>
      <section class="frame-wrapper">
        <router-view v-show="$route.name" />
        <!-- 子应用渲染区，用于挂载子应用节点 -->
        <section v-show="!$route.name" id="frame"></section>
      </section>
    </section>
</template>

<script>
import MainMenu from "./components/MainMenu.vue";

export default {
  name: "App",
  components: {
    MainMenu
  },
  data() {
    return {
      /**
       * 菜单列表
       * key: 唯一 Key 值
       * title: 菜单标题
       * path: 菜单对应的路径
       */
      menus: [
        {
          key: "Home",
          title: "主页",
          path: "/",
          type: 'desktop',
        },
        {
          key: "Vue2App",
          title: "Vue2 主页",
          path: "/vue",
          type: 'inbox',
        },
        {
          key: "React app",
          title: "React 主页",
          path: "/react",
          type: 'mail',
        },
      ]
    };
  }
};
</script>

<style lang="less" scoped>
#main-app {
  height: 100%;
  position: relative;
  .menu-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 40;
    width: 172px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .nav-wrapper {
    position: fixed;
    width: 100%;
    min-width: 1060px;
    padding-left: 172px;
    left: 0;
    top: 0;
    z-index: 30;
  }
}
.frame-wrapper {
  padding-left: 172px;
  flex-grow: 1;
  height: 100%;
  width: 100%;
  position: relative;
}
#frame {
  width: 100%;
  height: 100%;
  > :first-child {
    height: 100%;
  }
}
</style>
